<template>
    <div class="contesting full">
      <el-container class="full-width" style="height: 60px;background: white" direction="horizontal">
        <el-row class="full-width shadow-base container-border">
          <div class="left" style="width: 200px">
            <a href="#" style="vertical-align: middle;background-color: white;width: 200px;height: 60px;line-height: 60px" >
              <img src="../../../assets/images/brand.png" class="full-width" alt="考试星" style="padding:0 20px;box-sizing:border-box;vertical-align: middle">
            </a>
          </div>
          <div class="right container-border box-border" style="padding: 0 300px 0 200px;">
          </div>
          <div class="addition">
            {{$store.state.user.user.email}}
          </div>
        </el-row>
      </el-container>
      <div class="content-wrap full">
        <answer-card class="fl" :ques-data="quesData" />
        <div class="center-wrap fl clearfix">
          <el-row>
            <el-col >
              <el-card class="cur-ques-title-wrap text-left" :body-style="{padding:'10px'}">
                <span class="font-lg">
                  {{quesTitle}}
                </span>
              </el-card>
            </el-col>
          </el-row>
          <el-row class="ques-row">
            <el-col>
              <div class="ques-wrap clearfix">
                <QuesContent class="fl"/>
                <AnswerContent class="fl" />
              </div>
            </el-col>
          </el-row>
        </div>
        <right-aside class="fl" :leave-time="leaveTime" @end-contest="endContest" />
      </div>
      <el-bottom-button-dialog v-model="visible" width="30%" @on-confirm="confirmSubmit">
        <div slot="title">警告</div>
        确认要交卷吗？
      </el-bottom-button-dialog>
    </div>
</template>

<script>
import AnswerCard from './components/AnswerCard'
import QuesContent from './components/QuesContent'
import AnswerContent from './components/AnswerContent'
import RightAside from './components/RightAside'
import { mapState } from 'vuex'
import api from '@/api'
import format from '@/prototype'
import __ from 'lodash'
import ElBottomButtonDialog from '../../../Common/ElBottomButtonDialog'
export default {
  beforeCreate () {
    const zeroTime = new Date('0000-01-01 00:00').getTime()
    api.getContest(this.$route.params.id)
      .then(api.commonResp((success, data) => {
        if (success) {
          if (!this.curQuesInfo) {
            this.getQuesList()
          }
          this.quesData = data.selections
          this.timeLen = data.timeLen
          this.startTime = data.startTime
          this.interval = setInterval(() => {
            let len = this.len.getTime() - (new Date().getTime() - new Date(this.startTime).getTime())
            this.leaveTime = format.Format(new Date(len), 'HH:mm:ss')
            console.log(new Date().getTime() - new Date(this.startTime).getTime())
            console.log(len)
            if (this.len <= zeroTime) {
              this.confirmSubmit()
            }
          }, 1000)
        } else {
          this.$router.push({ name: 'notfound' })
        }
      }))
    this.$bus.$on('on-card-ques-checked', (sign, index) => {
      this.getQuesList(sign, index)
    })
  },
  methods: {
    confirmSubmit () {
      if (this.interval) {
        window.clearInterval(this.interval)
      }
      api.endContest(this.$route.params.id, this.$store.state.contest.answerList)
        .then(api.commonResp((success, data) => {
          if (success) {
            // 如果请求成功则跳转到成功页面
            this.$router.push({ name: 'showScore', params: { score: data } })
          } else {
            this.$message.error(data)
          }
        }))
    },
    endContest () {
      this.visible = true
    },
    getQuesList (sign, idx) {
      if (!idx) {
        idx = 1
      }
      if (!sign) {
        sign = idx
      }
      if (this.quesList[idx]) {
        this.$store.commit('contest/setCurQuesInfo', this.quesList[idx])
        return
      }
      sign = 10 * (Math.floor((sign - 1) / 10))
      api.getQuesList(this.$route.params.id, idx)
        .then(api.commonResp((success, data) => {
          console.log('before', sign, idx)
          if (success) {
            if (!this.quesList) {
              this.quesList = []
            }
            data.forEach((value) => {
              value.sign = ++sign
              this.quesList[value.index] = value
            })
            console.log('after', sign, idx)
            this.$store.commit('contest/setCurQuesInfo', this.quesList[idx])
          } else {
            this.$message.error(data)
          }
        }))
    }
  },
  data () {
    return {
      interval: null,
      visible: false,
      timeLen: null,
      startTime: null,
      leaveTime: '',
      title: '',
      quesList: [
      ],
      quesData: [
        // {
        //   title: null, // 大题的标题
        //   sumScore: null, // 总分
        //   count: null, // 题目总数
        //   ques: [
        //     {
        //       content: null, // 题目
        //       options: null, // 选项
        //       id: null // 唯一标识
        //     }
        //   ]
        // }
        {
          id: 1,
          title: '第一题、单选题', // 大题的标题
          sumScore: 150, // 总分
          count: 15, // 题目总数
          ques: []
          // ques: [
          //   {
          //     content: null, // 题目
          //     options: null, // 选项
          //     id: null // 唯一标识
          //   }
          // ]
        }
      ]
    }
  },
  components: {
    ElBottomButtonDialog,
    AnswerCard,
    QuesContent,
    AnswerContent,
    RightAside
  },
  computed: {
    len () {
      return new Date('0000-01-01 ' + this.timeLen)
    },
    ...mapState({
      curQuesInfo: ({ contest }) => contest.curQuesInfo
    }),
    quesTitle () {
      let ques = this.quesData
      if (!this.curQuesInfo) {
        return ''
      }
      let index = __.findIndex(ques, (item) => {
        return item.id === this.curQuesInfo.selectionId
      })
      if (!ques[index]) {
        return ''
      }
      return ques[index].title
    }
  }
}
</script>

<style scoped lang="less">
  @import url(../../../assets/css/common);
  .addition{
    width: 300px;
    font-size: 20px;
    line-height: 60px;
    float: right;
    text-align: center;
    position: relative;
    z-index: 100;
  }
  .addition:hover{
    color: @brand;
    cursor: pointer;
  }
  .answer-card {
    width: 300px;
    margin-left: 80px;
    overflow: hidden;
  }

  .contesting {
    background: #c9c9c9;
  }

  .content-wrap {
    padding-top: 40px;
  }

  .center-wrap {
    width: 800px;
    margin:0 80px;
  }

  .cur-ques-title-wrap {
    background: white;
  }

  .ques-row {
    margin-top: 40px;
    .ques-content {
      width: 390px;
      height: 562px;
    }
    .answer-content {
      margin-left: 20px;
      width: 390px;
      height: 562px;
    }
  }

  .right-aside {
    width: 150px;
  }
</style>
